$font-size-base: 16px;
$font-size-small: 14px;
$font-size-smallest: 12px;
$font-weight-normal: normal;
$font-weight-bold: bold;

// Utils
$spacer: 10px;
$transition: 0.2s ease all;
$index-has-icon: 30px;

// Theme:
$color-white: white;
$color-grey: #9e9e9e;
$color-grey-light: #e0e0e0;
$color-blue: #2196f3;
$color-red: #f44336;
$color-black: black;

// Mixins:
@mixin slided-top() {
  /* stylelint-disable-next-line function-no-unknown */
  top: -($font-size-base + $spacer);
  left: 0;
  font-size: $font-size-base;
  font-weight: $font-weight-bold;
}

// Base clases:
%base-bar-pseudo {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 1px;
  content: "";
  transition: $transition;
}

.material-input-component {
  position: relative;
  margin-top: 15px;
  background: $color-white;

  &.material--active {
    .material-label {
      @include slided-top;

      color: $color-blue;
    }

    .material-input-bar {
      &::before,
      &::after {
        width: 50%;
      }
    }
  }

  * {
    box-sizing: border-box;
  }

  .iconClass {
    .material-input__icon {
      position: absolute;
      top: $spacer;
      left: 0;
      width: $index-has-icon;
      height: $font-size-base;
      font-size: $font-size-base;
      font-weight: $font-weight-normal;
      line-height: $font-size-base;
      color: $color-blue;
      pointer-events: none;
    }

    .material-label {
      left: $index-has-icon;
    }

    .material-input {
      text-indent: $index-has-icon;
    }
  }

  .material-input {
    display: block;
    width: 100%;
    padding: $spacer $spacer $spacer calc($spacer / 2);
    font-size: $font-size-base;
    color: $color-black;
    background: none;
    border: none;
    border-bottom: 1px solid #{$color-grey-light};
    border-radius: 0;

    &:focus {
      outline: none;
      border: none;
      border-bottom: 1px solid transparent; // fixes the height issue
    }
  }

  .material-label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: $font-size-small;
    font-weight: $font-weight-normal;
    color: $color-grey;
    pointer-events: none;
    transition: $transition;
  }

  .material-input-bar {
    position: relative;
    display: block;
    width: 100%;

    &::before {
      @extend %base-bar-pseudo;

      left: 50%;
      background: $color-blue;
    }

    &::after {
      @extend %base-bar-pseudo;

      right: 50%;
      background: $color-blue;
    }
  }

  // Disabled state:
  &.material--disabled {
    .material-input {
      border-bottom-style: dashed;
    }
  }

  // Raised state:
  &.material--raised {
    .material-label {
      @include slided-top;
    }
  }

  // Errors:
  .material-errors {
    position: relative;
    overflow: hidden;

    .material-error {
      padding-top: calc(#{$spacer} / 2);
      padding-right: calc(#{$spacer} / 2);
      padding-left: 0;
      margin-top: 0;
      overflow: hidden;
      font-size: $font-size-smallest;
      line-height: $font-size-smallest + 2px;
    }
  }
}
